import React, { Component } from 'react';
import { messages } from "share/common";
import {Button, message, Modal, Popconfirm, Radio} from 'antd';
import AdvancedTable from 'components/advanced-table'
import deptGroupService from 'containers/setting/department-group/dept-group.service';
import DepartmentDialog from "components/template/department/department-dialog"
const { SimpleTable } = AdvancedTable;

class DepartmentGroupDetailList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      modalVisible: false,
      selectedRowKeys: [],
      includeSubDepartment: null,
    };
  }

  tableRef = null;
  searchForm = [
    {
      id: 'custDeptNumber',
      label: messages('basic-5.key260')/*部门编码*/,
      component: 'Input',
      dataIndex: 'custDeptNumber'
    },
    {
      id: 'departmentName',
      label: messages('basic-5.key160')/*部门名称*/,
      component: 'Input',
      dataIndex: 'name'
    },];
  columns = [{
    title: messages('basic-5.key260')/*部门编码*/,
    dataIndex: 'custDeptNumber'
  }, {
    title: messages('basic-5.key160')/*部门名称*/,
    dataIndex: 'name'
  },
  ];

  deleteItem = items => {
    this.setState({ loading: true });
    deptGroupService.deleteDeptGroupById(items)
      .then(() => {
        this.setState({ selectedRowKeys: [] });
        message.success(messages('common.operate.success')/*操作成功*/);
        this.tableRef.getList();
      })
      .finally(() => {
        this.setState({ loading: false })
      })
  };

  service = (page, size, searchParams) => {
    const { id } = this.props;
    let params = Object.assign(searchParams, {departmentGroupId: id, page, size,});
    return deptGroupService.getDeptGroupInfo(params)
  };

  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys })
  };

  handleListOk = result => {
    let param = [];
    const { id } = this.props;
    result.forEach((item) => {
      param.push({
        departmentGroupId: id,
        departmentId: item.id
      })
    });
    this.setState({ loading: true, modalVisible: false });
    deptGroupService.addDept(param)
      .then(() => {
        message.success(messages('common.operate.success')/*操作成功*/);
        this.tableRef.getList();
      })
      .finally(() => {
        this.setState({ loading: false })
      })
  };

  onRadioChange = (e) => {
    let title = e.target.value ? messages('basic-5.key596')/*下方列表中所选部门将包括子部门*/ : messages('basic-5.key597')/*下方列表中所选部门将不包括子部门*/;
    let _this = this;
    Modal.confirm({
      title,
      onOk: () => {_this.changeIncludeSub(e.target.value)},
      onCancel: () => {}
    });
  };

  changeIncludeSub = value => {
    this.setState({
      includeSubDepartment: value,
    });
    deptGroupService.changeIncludeSubDepartment(this.props.id, value)
      .then(res => {
        message.success(messages('common.operate.success')/*操作成功*/);
      })
      .catch(() => {
        message.error(messages('common.operate.filed')/*操作失败*/);
      })
  };

  render() {
    const { selectedRowKeys, modalVisible, loading, includeSubDepartment } = this.state;
    const { id, disabled, head } = this.props;
    const rowSelection = {
      selectedRowKeys: selectedRowKeys,
      onChange: this.onSelectChange
    };
    let del  = {
      title: messages('common.operation')/*操作*/,
      dataIndex: 'operation',
      width: '15%',
      render: (text, record) => (
        <span>
        <Popconfirm
          onConfirm={() => this.deleteItem([record.departmentDetailId])}
          title={messages('common.confirm.delete')/*确定要删除吗？*/}
        >
          <a>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      </span>
      )};
    return <div>
      <div className='standard-divider-title bottom-gap'>{messages('basic-5.key805')/*部门列表*/}</div>
      <div className='department-list-table-container'>
        <SimpleTable
          index
          judgeLastPageData
          onRef={ref => this.tableRef = ref}
          columns={disabled ? this.columns : this.columns.concat([del])}
          searchForm={this.searchForm}
          service={this.service}
          rowSelection={rowSelection}
          rowKey='departmentDetailId'
          loading={loading}
        >
          <div>
            <Button type="primary"
                    disabled={disabled}
                    style={{margin: "0 8px 0 -20px"}}
                    onClick={this.toState({ modalVisible: true })}
            >
              {messages('common.add')/*添加*/}
            </Button>
            <Button
              onClick={() => this.deleteItem(selectedRowKeys)}
              disabled={!selectedRowKeys.length || disabled}
            >
              {messages('common.delete')/*删除*/}
            </Button>
            <span className='left-gap'>
              {messages('basic-5.key598')/*作用范围*/}：
              <Radio.Group onChange={this.onRadioChange}
                           value={includeSubDepartment === null ? head.includeSubDepartment : includeSubDepartment}>
                <Radio value={true}>{messages('basic-5.key599')/*作用到子部门*/}</Radio>
                <Radio value={false}>{messages('basic-5.key600')/*不作用到子部门*/}</Radio>
              </Radio.Group>
            </span>
          </div>
        </SimpleTable>
      </div>
      <DepartmentDialog
        visible={modalVisible}
        onCancel={() => this.setState({ modalVisible: false })}
        onOk={this.handleListOk}
        parser={item => ({
          name: item.name || item.path,
          id: item.id
        })}
      />
    </div>
  }
}

export default DepartmentGroupDetailList;

